<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式属性</title>
		<!--文本格式化属性针对文本效果操作(四种方式10个属性)
		1.控制字体:font-family,font-size,font-weight
		3.控制文本布局text-aglin,line-weight,letter-spacing
		3.文本修饰效果:text-decoration,text-shadow
		4.处理文本效果:white-space
		-->
		<style>
			/*css3语法:效果器{
						属性: 属性值;
						属性:属性值;
						.....
						}叫法:一个样式
						*/
		    bod y div#d1{/*通过加权方式,锁定元素 权值:102*/
					   		color:#ffff00;
							/*知识点1:文本格式属性控制字体
							font-family:字体家族,指定字体形式
							*/
							font-family: 华文彩云:sans-serif;
							/*设置多个字体:浏览器会按照顺序寻找可用的字体
							用户体验:用户系统有什么字体,优先指定字体
							通常与通配选择器使用 *{}
							*/
						   /*知识点12:文本格式化属性控制字体
						   font-size字体大小属性,与单位共存
						   单位 px 像素 使用特点:绝对值,PC端
						   em 相对单位 理解:倍数
										使用特点:相对与元素按照倍数方式,移动*/
							/*知识点3:文本格式化属性控制字体
							font-weight:字体粗细属性,不存在单位
										属性值:数值[100 200 300 ...900]
												常用数值:400
												单词[400==normal,bold,light]
							使用方法:通配选择器搭配使用:指定全局字体正常字体粗细
							*/
							font-weight:900;			
							font-size:2em;
							/*补充:1.*/
			div#d1{/*通过加权方式,锁定元素 权值:101*/
					color:#00ff00;
					/*知识点4:文本格式化属性控制文本格式
					text-aligin:文本对齐属性
					text-aligin:left|right|center|justify:两端对齐,用于弹性布局
					*/
					text-align: justify;
			/*知识点5:文本格式化属性控制文本格式
			行高属性line-height:文本垂直效果
			使用方式:1.高度属性
					2.在高度属性的基础上加行高
			*/
		   border:1px solid red;
		   height:100px;
		   line-height:100px;
		   /*补充:文本对齐和行高属于对齐|间隙:字符和单词之间距离*/
		   /*知识6:letter-spacing:设置字符之间间隙
					word-spacing:设置单词之间间隙
			知识7: word-spacing:设置单词之间间隙
					*/
				   lett er-spacing:10px;
				   word-spacing:10px;
		   }
			#d1{/*权值:100*/
				color:#e4393c;
				
			}
				
			a.c1{/*权值:11*/
			/*知识点6:text-decoration 修饰超链接样式
			使用方法:与通配符一起使用,设置全员页面样式
			属性值:none|underline|line-through
			*/
			text-decoration:line-through;
			/*知识点9:text-shadow 修饰文本阴影
				属性值:none|underline|line-through
			*/
				text-decoration:line-through;
				/*知识点9:text-shadow 修饰文本阴影
				*/
			   text-shadow:;
			   p{
				   border: 1px solid red;
				   /*	知识点10:文本换行效果
					white-space 文本换行属性
					属性值:nowrap 不换行,只显示一行,超出部分隐藏
					|pre保存空格和回车|normal默认,空格合并,换行合并,换行隐藏
					
				   */
				  white-space:pre;
				  over-flow:hidden;
			   }
			}
		</style>
	</head>
	<body>
		<!--需求:创建div同时指定别名,添加假文[tab]
				id选择器,通过加权
		-->
		<div id = "d1">Lorem</div>
		<hr>
		<h4>文本修饰效果</h4>
		<!--文本修饰相关属性
		知识点7:text-decoration属性:设置超连接效果
		-->
		<a class="c1 c2"href="http://www.tsgzy.edu.cn"></a>
		<a href="http://www.tsgzy.edu.cn">实现跳转[方式]</a>
	</body>
</html>